<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue'
import { FormRules } from 'wot-design-uni/components/wd-form/types'
import { isArray } from 'wot-design-uni/components/common/util'


definePage({
  style: {
    navigationStyle: 'custom'
  },
})

function handleClickLeft() {
  uni.navigateBack({
    delta: 1
  })
}

const tab = ref<number>(0)
const tabsWithBadge = ref([
  { title: '绑定新卡' },
  { title: '解绑迁移' }
])

function handleChange(event: any) {
  console.log(event)
  tab.value = event.index;
}


const model = reactive<{
  bankNo: string | number
  verifyCode: string
  bindPerson: string
  name: string
  cardType: string[]
  cardNo: string
  phone: string
  fileList: Record<string, string>[]
  read: boolean
}>({
  bankNo: '',
  verifyCode: '',
  bindPerson: '1',
  name: '',
  cardType: ['1'],
  cardNo: '',
  phone: '',
  fileList: [],
  read: true,
})

const rules: FormRules = {
  bankNo: [
    {
      required: true,
      pattern: /\d{6}/,
      message: '卡号6个字符以上',
      validator: (value) => {
        if (value) {
          return Promise.resolve()
        } else {
          return Promise.reject('请输入卡号')
        }
      }
    }
  ],
  verifyCode: [
    {
      required: true,
      message: '请输入激活码'
    }
  ],
  bindPerson: [
    {
      required: true,
      message: '请选择绑定人'
    }
  ],
  name: [
    {
      required: true,
      message: '请输入姓名'
    }
  ],
  cardNo: [
    {
      required: true,
      message: '请输入证件号码'
    }
  ],
  phone: [
    {
      required: true,
      message: '请输入电话'
    }
  ],
  cardType: [
    {
      required: true,
      message: '请选择证件类型'
    }
  ],
  fileList: [
    {
      required: true,
      message: '请选择头像上传',
      validator: (value) => {
        if (isArray(value) && value.length) {
          return Promise.resolve()
        } else {
          return Promise.reject()
        }
      }
    }
  ]
  
  
}

// 推荐改名为 formRef，初始为 null，并声明 any（或具体类型）
const formRef = ref<any>(null)

function handleSubmit() {
  formRef.value
    .validate()
    .then(({ valid, errors }) => {
      console.log(valid) // true 验证成功
      console.log(errors)
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}

function handleFileChange({ fileList }) {
  model.fileList = fileList
}

const platformList = ref<any>([
  {
    value: '1',
    label: '居民身份证'
  }
])

function jump(url: string) {
  uni.navigateTo({ url });
}
</script>

<template>
  <view class="scenic-container">
    <view class="scenic-bg"></view>
    <wd-navbar left-text="年卡激活" left-arrow @click-left="handleClickLeft" custom-class="wd-color"
      custom-style="background-color: transparent !important;" safeAreaInsetTop></wd-navbar>

    <view class="goodlist">
      <wd-tabs v-model="tab" @change="handleChange" 
        inactive-color="#6D2E19" color="#85523E" background="transparent">
        <wd-tab title="绑定新卡">
          <view class="cantent flex">
            
            <wd-form ref="formRef" :model="model" :rules="rules" custom-class="form-info">
              <wd-cell-group custom-class="group" title="卡号激活码" border>
                <wd-input
                  label="卡号"
                  label-width="100px"
                  :maxlength="20"
                  prop="bankNo"
                  required
                  clearable
                  v-model="model.bankNo"
                  placeholder="请输入卡号"
                />
                <wd-input
                  label="激活码"
                  label-width="100px"
                  :maxlength="20"
                  prop="verifyCode"
                  required
                  clearable
                  v-model="model.verifyCode"
                  placeholder="请输入激活码"
                />
              </wd-cell-group>
              <wd-cell-group custom-class="group" title="输入个人信息完成绑定" border>
                <wd-cell title="绑定人" title-width="100px" prop="bindPerson">
                  <view style="text-align: left">
                    <wd-radio-group v-model="model.bindPerson" shape="button" checked-color="#FF441D">
                      <wd-radio value="1">本人</wd-radio>
                      <wd-radio value="2">亲友</wd-radio>
                    </wd-radio-group>
                  </view>
        
                  <!-- <wd-radio-group v-model="model.bindPerson" inline cell>
                    <wd-radio value="1">本人</wd-radio>
                    <wd-radio value="2">亲友</wd-radio>
                  </wd-radio-group> -->
                </wd-cell>                
                <wd-input label="姓名" label-width="100px" prop="name" placeholder="请输入姓名" clearable v-model="model.name" />
                <!-- label="基本用法" v-model="value" :columns="columns" @change="handleChange" -->
                <wd-select-picker label="证件类型" label-width="100px" prop="cardType" v-model="model.cardType" :columns="platformList" placeholder="请选择证件类型"/>
                <wd-input label="证件号码" label-width="100px" prop="cardNo" placeholder="请输入证件号码" clearable v-model="model.cardNo" />
                <wd-input label="电话" label-width="100px" prop="phone" placeholder="请输入电话" clearable v-model="model.phone" />
                
                <wd-cell title="头像上传" title-width="100px" prop="fileList">
                  <wd-upload :file-list="model.fileList" action="https://ftf.jd.com/api/uploadImg" @change="handleFileChange" :limit="1"></wd-upload>
                </wd-cell>
              </wd-cell-group>
              <view class="tip">
                <wd-checkbox v-model="model.read" prop="read" custom-label-class="label-class">
                  已阅读并同意
                  <text style="color: #4d80f0">《用户协议》</text>
                </wd-checkbox>
              </view>
              <view class="footer">
                <wd-button type="error" size="large" @click="handleSubmit" block>提交</wd-button>
                <view class="tip1" @click="jump('/pages/annualCardBuy/index')">还未购卡？点我购卡</view>
              </view>
            </wd-form>
          </view>
          <view style="height: 20rpx;"></view>
        </wd-tab>
        <wd-tab title="解绑迁移"></wd-tab>
      </wd-tabs>
    </view>

    <wd-message-box />
    <wd-toast />
  </view>
</template>

<style lang="scss" scoped>
.scenic-container {
  position: relative;
  & .scenic-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    background: linear-gradient(to bottom, #BF9763, #ffffff);
    height: 500rpx;
    width: 750rpx;
  }
  
  & .goodlist {
    & .cantent {
      width: 710rpx;
      margin: 20rpx 20rpx;
      background-color: #fff;
      border-radius: 20rpx;
      padding: 30rpx 20rpx 0 20rpx;
      box-sizing: border-box;
      position: relative;

      & .inline-txt {
        display: inline-block;
        font-size: 14px;
        margin: 0 8px;
        color: rgba(0, 0, 0, 0.45);
        vertical-align: middle;
      }
      :deep(.group) {
        margin-top: 12px;
      }
      & .tip {
        margin: 10px 15px 21px;
        color: #999;
        font-size: 12px;
      }
      & .footer {
        & .tip1 {
          line-height: 80rpx;
          text-align: center;
          font-size: 24rpx;
          color: #FF421E;
        }
      }
      :deep(.label-class) {
        color: #999 !important;
        font-size: 12px !important;
      }
      :deep(.form-info) {
        width: 100%;
      }
      :deep(.wd-radio) {
        line-height: inherit;
      }
    }
    & .bottom_loading {
      width: 750rpx;
      text-align: center;
      line-height:80rpx;
      color: #aaa;
    }

  }

  :deep() {
    .wd-navbar__text  {
      color: #fff;
    }
    .wd-navbar__arrow {
      color: #fff;
    }
    .wd-tabs, .wd-tabs__nav {
      background: transparent !important;
    }
  }
}
</style>
